<template>
	<view class="content">
		<view class="list-item">
			<view class="txt1">
				头像
			</view>
			<view class="aleft">
				<u-upload :custom-btn="true" ref="uUpload" show-upload-list :action="action"> 
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image :src="userInfo.portrait" mode="aspectFit" class="icons"></image>
					</view>
				</u-upload>
				<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
			</view>
		</view>
		<view class="list-item">
			<view class="txt1">
				用户昵称
			</view>
			<view class="flex">
				<u-input v-model="userInfo.nickname" type="text" :border="false" placeholder="请输入用户昵称" />
			</view>
		</view>
		<view class="list-item">
			<view class="txt1">
				手机号
			</view>
			<view class="flex">
				<u-input v-model="userInfo.mobile" disabled type="text" :border="false" placeholder="请输入手机号" />
			</view>
		</view>

		<view class="list-item">
			<view class="txt1">
				注册时间
			</view>
			<view class="flex">
				<view class="txt2">
					{{userInfo.create_time|formatDate}}
				</view>
			</view>
		</view>

		<view class="btn-bottom" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:'',
				userInfo:{}
			}
		},
		onShow() {
			try {
			    const userInfo = uni.getStorageSync('userInfo');
			    if (userInfo) {
			        console.log('当前数据------',userInfo);
					if(userInfo){
						this.userInfo = userInfo
					}
			    }
			} catch (e) {
			    // error
			}
		},
		methods: {
			//提交
			submit(){
				this.$http({
					url:this.$api.setMemberInfo,
					method:'POST',
					hideLoading:true,
					data:{
						portrait:this.userInfo.portrait,
						nickname:this.userInfo.nickname
					},
					success:res=>{
						console.log('修改个人信息接口返回----------',res)
						if(res.code==201){
							uni.showToast({
							    title:res.msg,
							    duration: 1000,
								icon:'none'
							});
						}
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			}
		},
		filters: {
			//格式化日期
			formatDate(e){
				let date = new Date(e*1000)
				console.log(date)
				let Y = date.getFullYear()
				let M = date.getMonth()+1
				let D = date.getDate()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				if(M<10){
					M="0"+M
				}
				if(D<10){
					D="0"+D
				}
				if(h<10){
					h="0"+h
				}
				if(m<10){
					m="0"+m
				}
				if(s<10){
					s="0"+s
				}
				return `${Y}-${M}-${D} ${h}:${m}:${s}`
				
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
	}

	.list-item {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #F8F8F8;
		padding: 10rpx 34rpx
	}

	.txt1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #131415;
		line-height: 40rpx;
		margin-right: 20rpx;
		min-width: 160rpx;
	}

	.icons {
		width: 78rpx;
		height: 78rpx;
		border-radius: 100%;
		margin-right: 10rpx;
		background: url(../../../static/header.png)center center no-repeat;
		background-size: 100%;
	}

	.aleft {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.txt2 {
		font-size: 26rpx;
		color: #131415;
		line-height: 42px;
	}

	.btn-bottom {
		width: 694rpx;
		height: 80rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166, 196, 255, 1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 100rpx;
	}
</style>
